<template>
	<view>
		<bjx-form label-type="inline" ref="form" :form="form" :rules="rules" msg-type="in">
			<uni-list>
				<uni-card title="申请信息" :is-shadow="true">
					<input-item prop="name" label="姓名">
						<input v-model="form.name" placeholder="姓名" type="text">
					</input-item>
					<input-item prop="phone" label="电话">
						<input v-model="form.phone" placeholder="电话" type="number">
					</input-item>
					<input-item prop="storeName" label="门店名称">
						<input v-model="form.storeName" placeholder="门店名称" type="text">
					</input-item>
					<input-item prop="address" :required="true" label="门店地址" :right-icon="true" @click="chooseAddress">
						<text v-if="hasAddress">{{form.address.address}}</text>
						<text v-else class="text-placeholder">请在地图选择地址</text>
					</input-item>
					
					<button type="default" @click="save">提交申请</button>
				</uni-card>
			</uni-list>
			
		</bjx-form>
	</view>
</template>

<script>
	/**
	 * @description 门店申请页面
	 * 需要保存经纬度 -- 获取附近门店--使用地图选择地址（暂未添加）
	 */
	import bjxForm from '@/components/bjx-form/bjx-form.vue'
	import inputItem from '../traveler/components/input-item.vue'
	import { mapState,mapGetters } from "vuex"
	
	export default{
		components:{
			bjxForm,
			inputItem
		},
		data() {
			return {
				form: {
					owner:'',
					name:'',
					phone:'',
					address:{},
					storeName:'',
					status:0
				},
				rules:{
					name: {
						required: true
					},
					phone: {
						required: true
					},
					address: {
						message:"门店地址不能为空",
						validator:()=>{
							if(this.form.address.address){
								return true
							}else{
								return false
							}
						}
					},
					storeName: {
						required: true
					}
				}
			}
		},
		computed: {
			hasAddress() {
				return !!this.form.address.address
			},
			...mapState(['storeInfo']),
			...mapGetters(["uid"]),
			
		},
		methods: {
			setAddress(e){
				this.form.address = e;
			},
			//选择地址
			chooseAddress(){
				let url = '/pages/chooseAddress/chooseAddress';
				if(this.form.address.title){
					url += `?data=${JSON.stringify(this.form.address)}`; 
				}
				this.navTo(url);
			},
			save() {
				this.$util.throttle(async ()=>{
					this.$refs.form.validate(async flag=>{
						if(flag){
							this.storeInfo._id?this.edit():this.newAdd()
						}
					})
				})
			},
			edit(){
				console.log('申请修改')
			},
			newAdd(){
				this.$request('store','add',this.form).then(res=>{
					this.$request('user','updateUser',{
						uid:this.uid,
						store_id:res.id
					})
					this.$util.msg('已发送申请')
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/mine/mine'
						})
					}, 1000);
				})
			}
		},
		onLoad() {
			if(this.storeInfo._id){
				this.form = Object.assign({},this.storeInfo)
			}
			this.form.owner = this.uid;
		}
	}
</script>

<style>
	.map{
		width: 100%;
	}
</style>
